<template>
  <!-- 自定义导航栏 -->
  <view class="nav-gation">
    <view class="nav-top"></view>
    <view class="nav-height">北京市海淀区医院</view>
  </view>

  <!-- 天气区域 -->
  <view class="yuyue">
    <image
      mode="aspectFill"
      src="https://diancan-1252107261.cos.ap-chengdu.myqcloud.com/tianqi/tianqi-top.png"
    >
    </image>
    <view class="weather">
      <view class="prohibit">
        <image
          src="https://diancan-1252107261.cos.accelerate.myqcloud.com/tianqi/address-a.png"
        ></image>
        <text>北京市</text>
      </view>
      <view>
        <image
          src="https://diancan-1252107261.cos.accelerate.myqcloud.com/tianqi/tigan-b.png"
        ></image>
        <text>体感温度 7°</text>
      </view>
      <view>
        <image
          src="https://diancan-1252107261.cos.accelerate.myqcloud.com/tianqi/ziwaixian-a.png"
        ></image>
        <text>紫外线强度 1W/m</text>
      </view>
    </view>
    <view class="tempture">
      <view class="tempture-num">
        <text>-7°</text>
        <image
          src="https://diancan-1252107261.cos.accelerate.myqcloud.com/tianqi/W2.png"
          mode="widthFix"
        ></image>
        <text>阴</text>
      </view>
      <view class="tempture-wind tempture-tips">
        <text>湿度 38%</text>
        <text>|</text>
        <text>东北风 3级</text>
      </view>
      <view class="tempture-tips">天寒地冻，千万裹严实点！</view>
    </view>
  </view>

  <!-- 疫苗预约 -->
  <view class="gongge">
    <view
      v-for="(item, index) in vaccine"
      :key="index"
      @click="goAppointment(index)"
    >
      <image :src="item.image" mode="aspectFit"></image>
      <text>{{ item.title }}</text>
    </view>
    <!-- <view>
      <image
        src="https://diancan-1252107261.cos.accelerate.myqcloud.com/yiliao/hpv.svg"
        mode="aspectFit"
      ></image>
      <text>HPV疫苗</text>
    </view>
    <view>
      <image
        src="https://diancan-1252107261.cos.accelerate.myqcloud.com/yiliao/hesuan.svg"
        mode="aspectFit"
      ></image>
      <text>核算检测</text>
    </view>
    <view>
      <image
        src="https://diancan-1252107261.cos.accelerate.myqcloud.com/yiliao/tuwenzixun.svg"
        mode="aspectFit"
      >
      </image>
      <text>图文咨询</text>
    </view> -->
  </view>

  <!-- 挂号体检 -->
  <view class="re-me-ex">
    <view class="re-me-ex-view" v-for="(item, index) in reserve" :key="index">
      <text class="re-me-ex-title">{{ item.title }}</text>
      <text class="re-me-ex-lable">{{ item.describe }}</text>
      <image mode="widthFix" :src="item.image"> </image>
    </view>
    <!-- <view class="re-me-ex-view">
      <text class="re-me-ex-title">健康体检</text>
      <text class="re-me-ex-lable">当天出报告</text>
      <image
        mode="widthFix"
        src="https://diancan-1252107261.cos.accelerate.myqcloud.com/yiliao/two-tijian.png"
      >
      </image>
    </view> -->
  </view>

  <!-- 疫情数据 -->
  <view class="online-title">
    <view>疫情数据</view>
    <view class="epidemic-time"><text>截止2023-3-7</text></view>
  </view>
  <view class="epidemic-view sele-test-back">
    <view>
      <text>全国累计确诊</text>
      <text class="num-of-people" style="color: #a48256">9481608</text>
    </view>
    <view>
      <text>全国累计死亡</text>
      <text class="num-of-people" style="color: #666666">31432</text>
    </view>
    <view>
      <text>全国累计治愈</text>
      <text class="num-of-people" style="color: #14b593">464712</text>
    </view>
    <view>
      <text>北京现存确诊</text>
      <text class="num-of-people" style="color: #ff3535">11607</text>
    </view>
    <view>
      <text>北京累计确诊</text>
      <text class="num-of-people" style="color: #ff3535">28389</text>
    </view>
    <view>
      <text>北京累计治愈</text>
      <text class="num-of-people" style="color: #14b593">16762</text>
    </view>
  </view>

  <!-- 热门挂号 -->
  <view class="online-title">
    <view>热门挂号</view>
    <view class="online-More">
      <text>查看更多</text>
      <image src="/static/other/gengduo.svg"></image>
    </view>
  </view>
  <view class="online-reg">
    <view
    :style="{ background: item.background }"
      v-for="(item, index) in popular"
      :key="index"
    >
      <text>{{ item.title }}</text>
      <image mode="aspectFit" :src="item.image"></image>
    </view>
    <!-- <view style="background: #d5e2ff">
      <text>消化科</text>
      <image
        mode="aspectFit"
        src="https://diancan-1252107261.cos.accelerate.myqcloud.com/yiliao/erke.png"
      ></image>
    </view> -->
  </view>

  <!-- 健康自测 -->
  <view class="online-title">
    <view>健康自测</view>
  </view>
  <!-- 第一排测试 -->
  <view class="self-test">
    <view
      class="sele-test-top sele-test-flex sele-test-one sele-test-back"
      v-for="(item, index) in [selfTest[0]]"
      :key="index"
    >
      <view class="sele-test-view">
        <text class="top-title">{{ item.name }}</text>
        <text class="top-lable">{{ item.describe }}</text>
        <view class="top-people">
          <text class="top-num">{{ item.number_of_people }}</text>
          <text class="top-min top-lable"
            >人测过 /{{ item.question }} 9题 {{ item.minute }}/ 5分钟</text
          >
        </view>
      </view>
      <image class="top-img" mode="widthFix" :src="item.image"> </image>
    </view>
    <!-- 第二排测试 -->
    <view
      class="sele-test-top sele-test-flex sele-test-back"
      v-for="(item, index) in selfTest.slice(1)"
      :key="index"
    >
      <view class="sele-test-view">
        <text class="top-title">{{ item.name }}</text>
        <text class="top-lable top-min"
          >{{ item.question }} / {{ item.minute }}分钟</text
        >
        <view class="top-people">
          <text class="top-num">{{ item.number_of_people }}</text>
          <text class="top-min top-lable">人测过</text>
        </view>
      </view>
      <image
        class="top-img bottom-img"
        mode="widthFix"
        :src="item.image"
      ></image>
    </view>
    <!-- <view class="sele-test-top sele-test-flex sele-test-back">
      <view class="sele-test-view">
        <text class="top-title">失眠程度测试</text>
        <text class="top-lable top-min">7题 / 5分钟</text>
        <view class="top-people">
          <text class="top-num">2000</text>
          <text class="top-min top-lable">人测过</text>
        </view>
      </view>
      <image
        class="top-img bottom-img"
        mode="widthFix"
        src="https://diancan-1252107261.cos.accelerate.myqcloud.com/yiliao/jiaolv.png"
      ></image>
    </view> -->
  </view>

  <!-- 骨架屏 -->
</template>
  
<script lang="ts" setup>
// 1.引入基础模块
import { reactive, toRefs, onMounted } from "vue"
import { onPageScroll } from "@dcloudio/uni-app";
import { reqGetHome } from "@/serve/api"
import { vaccineType, reserveType, popularType, selfTesType } from "@/types/index"

// 2.定义页面响应式数据
let pageData = reactive({
    vaccine: [] as vaccineType[],//疫苗预约数据
    reserve: [] as reserveType[],//体检挂号
    popular: [] as popularType[],//热门挂号
    selfTest: <selfTesType[]>[],//健康自测
    menu_top: "",//按钮距离顶部的高度
    menu_height: "",//按钮自身的高度
    menu_top_height: "",//天气距离顶部的位置高度
    styleColor: "white",//导航栏字体颜色
    styleOpacity: 0
})

// 3.批量解构页面响应式数据
let { vaccine, reserve, popular, selfTest, menu_top, menu_height, menu_top_height, styleColor, styleOpacity } = toRefs(pageData)

// 定义获取首页数据的方法
async function getHomeData() {
    let { data } = await reqGetHome()
    pageData.vaccine = data[0].vaccine
    pageData.reserve = data[1].reserve
    pageData.popular = data[2].popular
    pageData.selfTest = data[3].self_test
    console.log(data)
}

// 跳转到疫苗预约页面
function goAppointment(type: number) {
    // 根据数据下标确定跳转页面路径地址  绝对 /   相对 ./ | ../
    let url = ""
    if (type == 0) {
        url = "/pages/newVaccine/newVaccine"
    } else if (type == 1) {
        url = "/pages/hpvVaccine/hpvVaccine"
    } else if (type == 2) {
        url = "/pages/AccountDetection/AccountDetection"
    } else if (type == 3) {
        url = "../graphicConsultation/graphicConsultation"
    }
    uni.navigateTo({ url })
}

// 监听页面滚动 修改导航栏样式风格
onPageScroll((info) => {
    // console.log('滚动位置：', info)
    // 50临界点  
    pageData.styleColor = info.scrollTop >= 50 ? "black" : "white"//字体颜色
    pageData.styleOpacity = info.scrollTop >= 50 ? 1 : info.scrollTop / 100 //字体颜色
})

onMounted(() => {
    // 获取页面接口数据
    getHomeData()
    // 获取导航栏中右侧胶囊的位置信息（api函数）
    let menuRes = uni.getStorageSync('menuData')
    // console.log(menuRes)
    pageData.menu_top = menuRes.top + 'px'
    pageData.menu_height = menuRes.height + 'px'
    pageData.menu_top_height = (menuRes.top + menuRes.height) + 'px'

})


</script>
<style scoped >
.nav-gation {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  background-color: rgba(255, 255, 255, 0);
  /*styleOpacity*/
}

.nav-top {
  height: 24px;
  /*menu_top*/
}

.nav-height {
  height: 32px;
  /*menu_height*/
  line-height: 32px;
  /*menu_height*/
  padding-left: 20rpx;
  margin-bottom: 10rpx;
  color: black;
  /*styleColor*/
  font-weight: bold;
  font-size: 35rpx;
}

/* 温度 */
.yuyue {
  height: 700rpx;
  position: relative;
  color: #ffffff;
}

.yuyue image {
  width: 100%;
  display: block;
  height: 700rpx;
}

.weather {
  position: absolute;
  left: 0;
  top: 56px;
  /*menu_height+menu_top*/
}

.weather image {
  width: 35rpx;
  height: 35rpx;
  display: block;
  margin-right: 10rpx;
}

.weather view {
  font-size: 30rpx;
  display: flex;
  align-items: center;
  padding: 10rpx 20rpx;
}

.weather view:nth-child(1) {
  font-size: 35rpx !important;
  font-weight: bold;
}

.tempture {
  position: absolute;
  left: 50%;
  top: 75%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
}

.tempture-num {
  display: flex;
  align-items: flex-end;
}

.tempture-num image {
  width: 60rpx;
  height: 60rpx;
  display: block;
  margin: 0 20rpx;
}

.tempture-num text:nth-child(1) {
  font-size: 100rpx;
  height: 100rpx;
  line-height: 100rpx;
}

.tempture-num text:nth-child(3) {
  font-size: 35rpx;
}

.tempture-wind {
  padding: 30rpx 0;
}

.tempture-wind text:nth-child(2) {
  padding: 0 20rpx;
}

.tempture-tips {
  font-size: 30rpx;
  text-align: center;
}

.gongge {
  display: flex;
  justify-content: space-between;
  margin: 40rpx 30rpx;
}

.gongge image {
  width: 50rpx;
  height: 50rpx;
  display: block;
  padding-bottom: 20rpx;
}

.gongge view {
  /* width: calc(20% - 10rpx*2); */
  /* margin: 10rpx; */
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 28rpx;
}

.re-me-ex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10rpx;
}

.re-me-ex-view {
  position: relative;
  height: 200rpx;
  width: 48%;
}

.re-me-ex-view image {
  width: 150rpx;
  display: block;
  position: absolute;
  bottom: 0;
  right: 20rpx;
}

.re-me-ex view:nth-child(1) text:nth-child(1) {
  color: #0042ff;
}

.re-me-ex view:nth-child(2) text:nth-child(1) {
  color: #dc6200;
}

.re-me-ex view:nth-child(1) {
  background-image: linear-gradient(to right, #d7dfff 10%, #5a9fff 100%);
  border-radius: 20rpx;
}

.re-me-ex view:nth-child(2) {
  background-image: linear-gradient(to right, #ffdbb4 10%, #ffc56b 100%);
  border-radius: 20rpx;
}

.re-me-ex-title {
  position: absolute;
  top: 20rpx;
  left: 20rpx;
  font-size: 40rpx;
}

.re-me-ex-lable {
  font-size: 30rpx;
  color: #ffffff;
  position: absolute;
  top: 90rpx;
  left: 20rpx;
}

/* 疫情数据 */
.epidemic-time {
  font-size: 25rpx;
  color: #a6abb0;
}

.epidemic-view {
  margin: 10rpx;
  border-radius: 20rpx;
  display: flex;
  flex-wrap: wrap;
  font-size: 28rpx;
}

.epidemic-view view {
  width: calc(33% - 30rpx * 2);
  margin: 10rpx;
  padding: 20rpx;
  text-align: center;
}

.num-of-people {
  font-weight: bold;
  font-size: 35rpx;
}

/* 在线挂号 */
.online-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40rpx 10rpx 10rpx 10rpx;
  font-weight: bold;
}

.online-title view:nth-child(1) {
  font-size: 35rpx;
}

.online-More {
  display: flex;
  align-items: center;
}

.online-More image {
  width: 40rpx;
  height: 40rpx;
  display: block;
  margin-left: 10rpx;
}

.online-reg {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin: 10rpx 0;
}

.online-reg image {
  width: 50rpx;
  height: 70rpx;
}

.online-reg view {
  width: calc(33% - 30rpx * 2);
  margin: 10rpx;
  padding: 20rpx;
  display: flex;
  align-items: center;
  font-size: 28rpx;
  justify-content: space-between;
  border-radius: 10rpx;
}

/* 健康自测 */
.self-test {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.sele-test-top {
  display: flex;
  justify-content: space-between;
}

.sele-test-flex {
  width: calc(50% - 10rpx * 2);
  margin: 10rpx;
  border-radius: 20rpx;
  overflow: hidden;
  position: relative;
  height: 250rpx;
}

.sele-test-one {
  width: 100%;
}

.sele-test-back {
  background-color: #ffffff;
  box-shadow: #f7f7f7 0px 0px 20rpx 10rpx;
}

.top-lable {
  color: #a6abb0;
}

.top-img {
  width: 250rpx;
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
}

.bottom-img {
  width: 170rpx !important;
}

.self-test text {
  display: block;
}

.sele-test-view {
  position: absolute;
  left: 20rpx;
  top: 35rpx;
}

.top-people {
  display: flex;
  align-items: baseline;
  padding-top: 30rpx;
}

.top-title {
  padding-bottom: 10rpx;
  font-size: 35rpx;
}

.top-num {
  font-size: 35rpx;
  padding-right: 10rpx;
}

.top-min {
  font-size: 25rpx;
}

.prohibit {
  pointer-events: none;
}
</style>
  
  